<template>
    <view class="rule-content">
        <div class="rule-row">
            <div class="rule-title">自动打印</div>
            <div>
                <el-form :model="state.form" label-width="auto" ref="formRef" :rules="innerrule">
                    <el-form-item label="" prop="printerAuto">
                        <el-radio-group v-model="state.form.printerAuto">
                            <el-radio :label="1">开启</el-radio>
                            <el-radio :label="2">关闭</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item>
                        <div class="rule-tips">开启后自动打印后，订单支付成功时立即打印。</div>
                    </el-form-item>
                    <el-form-item label="打印来源" prop="printerSource" required v-if="state.form.printerAuto == 1">
                        <el-checkbox-group v-model="state.form.printerSource">
                            <!-- 同城配送暂时隐藏 -->
                            <!-- <el-checkbox label="1" name="from">同城配送订单</el-checkbox> -->
                            <el-checkbox label="2" name="from">上门自提订单</el-checkbox>
                        </el-checkbox-group>
                    </el-form-item>
                    <el-form-item label="打印张数" prop="printerNumber" required v-if="state.form.printerAuto == 1">
                        <el-select v-model="state.form.printerNumber">
                            <el-option label="1" :value="1" />
                            <el-option label="2" :value="2" />
                            <el-option label="3" :value="3" />
                            <el-option label="4" :value="4" />
                            <el-option label="5" :value="5" />
                        </el-select>
                    </el-form-item>
                </el-form>
            </div>
        </div>
        <div>
            <el-button type="primary" @click="save(formRef)" v-auth="'printer_set:edit_rule'">保存</el-button>
        </div>
    </view>
</template>

<script setup>
import { ref, reactive } from 'vue';
import request from '@/request';
import { ElMessage } from 'element-plus';
import { useRouter } from 'vue-router';
const router = useRouter();
const state = reactive({
    form: {
        printerAuto: 1, //   '自动打印1开启 2关闭',
        printerNumber: 1, // '自动打印张数',
        printerSource: [] //'打印来源 1 同城配送订单 2上门自提订单',
    }
});
const formRef = ref();
let innerrule = reactive({
    printerSource: [{ type: 'array', required: true, message: '请选择打印来源' }]
});
const save = async formEl => {
    if (state.form.printerAuto == 1) {
        if (!formEl) return;
        await formEl.validate(valid => {
            if (valid) {
                request('ruleSave', state.form).then(res => {
                    ElMessage.success(`保存成功`);
                });
            }
        });
    } else {
        state.form.printerNumber = 1;
        state.form.printerSource = [];
        request('ruleSave', state.form).then(res => {
            ElMessage.success(`保存成功`);
            getDetail();
        });
    }
};
const getDetail = async () => {
    let res = await request('ruleInfo');
    Object.assign(state.form, res.data);
    if (state.form.printerAuto == 2) {
        state.form.printerNumber = 1;
        state.form.printerSource = [];
    }
};
getDetail();
</script>
<style lang="scss" scoped>
:deep(.el-select) {
    width: 100px;
}
:deep(.el-form-item__label-wrap) {
    margin-left: 0 !important;
}
.rule-content {
    margin-top: 16px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    background-color: #fff;
    height: calc(100% - 64px);
    box-sizing: border-box;
    .rule-row {
        display: flex;
    }
    .rule-title {
        line-height: 32px;
        margin-right: 12px;
    }
    .rule-tips {
        font-size: 14px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #969696;
        line-height: 14px;
    }
}
</style>
